<template>
  <div class="card">
    <header class="card-header">
      <h2>统一社会信用代码生成器</h2>
    </header>
    <main class="card-body">
      <label for="count-input">
        生成数量:
        <input type="number" id="count-input" v-model.number="count" min="1" max="1000" />
      </label>
      <button @click="generateUSCCs" class="generate-button">
        生成统一社会信用代码
      </button>
      <button v-if="usccCodes.length > 0" @click="copyToClipboard" class="copy-button">复 制</button>
      <button v-if="usccCodes.length > 0" @click="clear" class="clear-button">清 空</button>
      <textarea ref="usccTextArea" readonly :value="usccCodes.join('\n')" class="output-textarea"
        @mousedown="startResize" @mousemove="resize" @mouseup="endResize"></textarea>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      usccCodes: [],
      textareaHeight: 100,
      resizing: false,
    };
  },
  methods: {
    generateUSCCs() {

      if (this.count > 100) {
        this.$toast('最大支持输入100', 2000, 50);
        return;
      }

      this.usccCodes = [];

      // 前端生成
        for (let i = 0; i < this.count; i++) {
          this.usccCodes.push(this.generateUnifiedSocialCreditCode());
        }

      // 调用后端生成
      // fetch('http://localhost:8099/api/genorgcode/createorgcode', {
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'application/json'
      //   },
      //   body: JSON.stringify({ count: this.count })
      // })
      //   .then(response => response.json())
      //   .then(data => {
      //     this.usccCodes = data.usccCodes;
      //   })

    },
    // 生成随机的 17 位统一社会信用代码前缀
    generateRandomCode() {
      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let code = '';
      for (let i = 0; i < 17; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return code;
    },

    // 计算校验码
    calculateCheckCode(code) {
      const weights = [1, 3, 9, 27, 19, 17, 1, 6, 3, 8, 9, 10, 5, 4, 2, 1];
      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      const checkCodeChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

      let sum = 0;

      for (let i = 0; i < 17; i++) {
        const char = code.charAt(i);
        const value = chars.indexOf(char);
        sum += value * weights[i];
      }

      const remainder = sum % 31;
      const checkCode = (31 - remainder) % 31;

      return checkCodeChars[checkCode];
    },

    // 生成统一社会信用代码
    generateUnifiedSocialCreditCode() {
      const prefix = this.generateRandomCode();
      const checkCode = this.calculateCheckCode(prefix);
      return prefix + checkCode;
    },


    copyToClipboard() {
      this.$refs.usccTextArea.select();
      document.execCommand("copy");
      // alert("USCC 代码已复制到剪贴板!");
      this.$toast('已复制到剪贴板!', 1000, 50);
    },
    startResize(event) {
      this.resizing = true;
      this.textareaHeight = event.clientY;
      window.addEventListener("mouseup", this.endResize);
    },
    resize(event) {
      if (this.resizing) {
        const delta = event.clientY - this.textareaHeight;
        this.$refs.usccTextArea.style.height = `${this.$refs.usccTextArea.offsetHeight + delta
          }px`;
      }
    },
    endResize() {
      this.resizing = false;
      window.removeEventListener("mouseup", this.endResize);
    },
    clear() {
      this.usccCodes = [];
    }
  },
};
</script>

<style scoped>
/* 与 UUIDGenerator.vue 中的样式相同 */
.card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 600px;
}

.card-header {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 20px;
}

.generate-button {
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.copy-button {
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #8d9fb3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.clear-button {
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #8d9fb3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.output-textarea {
  width: 100%;
  height: 300px;
  resize: none;
  border: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.5;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="number"] {
  width: 100px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>